<main-layout [sliderWidth]="sliderWidth" (toggle)="this.toggleCollapsed($event)" [minHeight]="'630px'">
  <main-slider>
    <div style="height:100%;">
      <ul nz-menu [nzMode]="'inline'" [nzInlineCollapsed]="isCollapsed" style="height:100%;"
          [style.overflow-y]="isCollapsed?'':'auto'" [style.overflow-x]="isCollapsed?'':'hidden'">
        <li style="padding-left:24px">
          <span>店铺宣传图</span>
        </li>
        <li *ngFor="let item of list;let i = index;" nz-menu-item style="padding-left:24px;"
            [nzSelected]="showcaseId == item.id"
            (click)="showcaseId = item.id;templateName = item.name;getCaseDetailList();">
          <i *ngIf="i == 0" class="anticon anticon-tag-o"></i>
          <i *ngIf="i == 1" class="anticon anticon-picture"></i>
          <i *ngIf="i == 2" class="anticon anticon-home"></i>
          <span>{{ item.name }}</span>
        </li>
      </ul>
    </div>
  </main-slider>
  <main-content>
    <!--<div nz-form-item nz-row style="margin-top:25px;">-->
      <!--<div nz-col [nzSm]="24">-->
        <!--<div class="text-left">-->
          <!--<label>展位名称：{{shopid}}</label>-->
          <!--<nz-input [nzSize]="'large'" name="keyword" [nzPlaceHolder]="'请输入展位名称'" [(ngModel)]="name"-->
                    <!--style="width: 185px;" (keydown)="keyDown($event)"></nz-input>-->
          <!--<button nz-button [nzType]="'primary'" [nzSize]="'large'" style="margin-left:22px;" (click)="search();">-->
            <!--查询-->
          <!--</button>-->
          <!--<button nz-button class="ml-7" (click)="name='';reset()" [nzSize]="'large'">重置</button>-->
        <!--</div>-->
      <!--</div>-->
    <!--</div>-->
    <div class="product-operate clearfix">
      <div nz-col [nzSm]="12">
        <button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="goAddPage()">
          <i class="anticon anticon-plus"></i><span>新建{{ templateName }}</span>
        </button>
        <button nz-button [nzType]="'default'" [nzSize]="'large'" *ngIf="checkedIds.length"
                (click)="deleteCheckedGroup()">
          <i class="anticon anticon-delete"></i><span>批量删除</span>
        </button>
      </div>
    </div>

    <div class="product-list-out mt-16">
      <div class="checked-line" *ngIf="!!checkedIds.length">
        <i class="anticon anticon-info-circle"></i> 已选择 <span>{{checkedIds.length}}</span> 项
        <a href="javascript:;" (click)="checkedIds=[];_indeterminate=false;_checkAll(false);">清空</a>
      </div>
      <nz-table [(nzLoading)]="loading"
                [nzCustomNoResult]="true"
                [(nzPageSize)]="pageSize"
                [(nzPageIndex)]="page"
                [(nzTotal)]="total"
                (nzPageIndexChange)="getCaseDetailList()"
                [nzAjaxData]="showcaseDetailList">
        <thead nz-thead>
        <tr>
          <th nz-th [nzCheckbox]="true">
            <label nz-checkbox [(ngModel)]="_allChecked" [nzIndeterminate]="_indeterminate"
                   (ngModelChange)="_checkAll($event)">
            </label>
          </th>
          <th nz-th>展示名称</th>
          <th nz-th>展示图片</th>
          <th nz-th>转跳类型</th>
          <th nz-th>
            <span>创建时间</span>
            <!--<nz-table-sort [(nzValue)]="orderJson.created_at" (nzValueChange)="sort('created_at',$event)"></nz-table-sort>-->
          </th>
          <th nz-th>操作</th>
        </tr>
        </thead>
        <tbody nz-tbody *ngIf="showcaseDetailList.length>0">
        <ng-container *ngFor="let item of showcaseDetailList">
          <tr nz-tbody-tr>
            <td nz-td [nzCheckbox]="true">
              <label nz-checkbox [(ngModel)]="item.checked" (ngModelChange)="checkedSingele($event, item.id)">
              </label>
            </td>
            <td>{{ item.name }}</td>
            <td>
              <img *ngIf="item.pic_url" style="width:48px;height:48px;" src="{{ item.pic_url_s }}" alt="">
              <span *ngIf="!item.pic_url">无展示图</span>
            </td>
            <td *ngIf="item.goto_type == 1">商品</td>
            <td *ngIf="item.goto_type == 2">活动</td>

            <td>{{ item.created_at }}</td>
            <td>
              <a href="javascript:;" (click)="editPage(item)">编辑</a>
              <span nz-table-divider class="span-divider"></span>
              <a href="javascript:;" (click)="detailDel($event,item)">删除</a>
            </td>
          </tr>
        </ng-container>
        </tbody>
        <div noResult>
          <div class="text-center" style="margin-top:132px;margin-bottom:100px;">
            <i class="empty-icon"></i>
            <p>目前并无任何展位</p>
            <p>请添加展位</p>
          </div>
        </div>
      </nz-table>
    </div>
  </main-content>
</main-layout>
